/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Card, Row, Col, Input, TreeSelect, Button, Tree, Drawer, Divider, Radio,Table } from 'antd';
import MyTable from '../../components/common/MyTable';
import PublicService from '../../services/PublicService';
import request from '../../utils/request';
const Search = Input.Search;
// const TreeNode = TreeSelect.TreeNode;
const SHOW_PARENT = TreeSelect.SHOW_PARENT;
import style from './GasDate.less';
const { TreeNode } = Tree;
const xc = require("../../assets/xc.png")
const blueCar = require("../../assets/blueCar.svg")
const gasCar = require("../../assets/gasCar.svg")
const orangeCar = require("../../assets/orangeCar.svg")
const xc3 = require("../../assets/xc3.png")
const xc2 = require("../../assets/xc2.png")
const xc1 = require("../../assets/xc1.png")
var infoWindow
const tup = require("../../assets/tup.png")

var map, infoWindow
class GasDate extends Component {

    constructor(props) {
        super(props)


        this.state = {
            type:"地图",
            visible: false,
            autoExpandParent: true,
            nameArr: [],
            centre: [114.304494, 30.593295],
            realTime: [],
            target: [],
            offLine: 0,
            park: 0,
            travel: 0,
            offLineNum: 0,
            parkNum: 0,
            travelNum: 0,
            treeData: [
                {
                    children: [
                        {
                            children: [
                                {
                                    children: [
                                        {
                                            pid: "#1燃气站",
                                            title: "张三",
                                            value: "张三"
                                        },
                                        {
                                            pid: "#1燃气站",
                                            title: "李四",
                                            value: "李四"
                                        }
                                    ],
                                    pid: "#1企业",
                                    title: "#1燃气站",
                                    value: "#1燃气站"
                                },
                                {
                                    children: [
                                        {
                                            pid: "#2燃气站",
                                            title: "王五",
                                            value: "王五"
                                        },
                                        {
                                            pid: "#2燃气站",
                                            title: "李四",
                                            value: "李四"
                                        }
                                    ],
                                    pid: "#1企业",
                                    title: "#2燃气站",
                                    value: "#2燃气站"
                                }
                            ],
                            pid: "全部",
                            title: "#1企业",
                            value: "#1企业"
                        },
                        {
                            children: [
                                {
                                    children: [
                                        {
                                            pid: "#3燃气站",
                                            title: "田七",
                                            value: "田七"
                                        },
                                        {
                                            pid: "#3燃气站",
                                            title: "王九",
                                            value: "王九"
                                        }
                                    ],
                                    pid: "#2企业",
                                    title: "#3燃气站",
                                    value: "#3燃气站"
                                }
                            ],
                            pid: "全部",
                            title: "#2企业",
                            value: "#2企业"
                        }
                    ],
                    pid: "0",
                    title: "全部",
                    value: "全部"
                }
            ],
            value: [],
            loading: false,
            dataSource: [],
            pageIndex: 1,
            pageSize: 10,
            columns: [
                {
                    title: '燃气公司',
                    dataIndex: 'enterprise',
                    width: '12%',
                    align: "center",
                },
                {
                    title: '燃气供应站',
                    dataIndex: 'gasStationName',
                    width: '8%',
                    align: "center",
                },
                {
                    title: '安全员',
                    dataIndex: 'name',
                    width: '8%',
                    align: "center",
                    render: (text, record) => <span onClick={this.onPsy.bind(this, record)} style={{ cursor: "pointer" }}>{text}</span>
                },
                {
                    title: "车牌号",
                    dataIndex: 'plateNumber',
                    width: '8%',
                    align: "center",
                    render: (text) => <span>{text ? text : '/'}</span>
                },
                {
                    title: 'GPS状态',
                    width: '8%',
                    dataIndex: 'GPSType',
                    align: "center",
                },
                {
                    title: "速度(km/h)",
                    dataIndex: 'speed',
                    width: '8%',
                    align: "center",
                },
                {
                    title: '上报时间',
                    dataIndex: 'reportTime',
                    width: '15%',
                    align: "center",
                },
                {
                    title: '参考位置',
                    dataIndex: 'referencePosition',
                    width: '13%',
                    align: "center",
                },
                {
                    title: '配送任务',
                    dataIndex: 'distributionTask',
                    width: '15%',
                    align: "center",
                },

            ]

        }



    }

    componentDidMount() {
      
        this.save()
        this.initThree()
    }

    showDrawer = () => {
        this.setState({
            visible: true,
        });
    };

    onClose = () => {
        this.setState({
            visible: false,
        });
    };

    //切换地图视角
    onGroup = (e) => {
        console.log(this.state.dataSource,this,e.target.value)
        this.initThree(this.state.dataSource,e.target.value)
        this.setState({
            type:e.target.value
        })
    }


    onPsy = (record) => {
        console.log(record)

        this.setState({

            realTime: record.realTime,

        })





        setTimeout(() => {
            this.initThree1(record.GPSType)

        }, 1000);

    }

    initThree1 = (str) => {
        var infoWindow1 = new AMap.InfoWindow({
            content: <div>123</div>//传入 dom 对象，或者 html 字符串
        });


        var map1 = new AMap.Map('container', {
            zoom: 13,//级别
            center: this.state.centre,//中心点坐标
            pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D' // 地图模式
        });


        if (str == '离线') {
            var marker2 = new AMap.Marker({
                position: this.state.realTime,
                icon: "./img/xc1.png"
                // content:<img src="./img/xc1.png" />
            })
        } else if (str == '行驶在线') {
            var marker2 = new AMap.Marker({
                position: this.state.realTime,
                icon: "./img/xc3.png"
                // content:<img src="./img/xc1.png" />
            })
        } else {
            var marker2 = new AMap.Marker({
                position: this.state.realTime,
                icon: "./img/xc2.png"
                // content:<img src="./img/xc1.png" />
            })
        }



        infoWindow1.open(map1);


        var marker1 = new AMap.Marker({
            position: this.state.target,
            // content:<img src="./img/xc1.png" />
        })

        if (str == '行驶在线') {
            var cli = [marker2, marker1]
        } else {
            var cli = [marker2]
        }



        map1.add(cli);//添加到地图

        //移除  map.remove(marker)
        AMap.plugin('AMap.ToolBar', function () {//异步加载插件
            var toolbar = new AMap.ToolBar();
            map1.addControl(toolbar);
        });
        console.log(marker2)
    }

    initThree = (str,type) => {

        console.log(str)


        if(type === '三维') {
            console.log("jinru")
            map = new AMap.Map("container", {
                resizeEnable: true,
                pitch: 75, // 地图俯仰角度，有效范围 0 度- 83 度
                viewMode: '3D' // 地图模式
    
            });
        } else if(type === '卫星') {
            map = new AMap.Map("container", {
                layers: [new AMap.TileLayer.Satellite()]
         
    
            });
        

        } else {
            map = new AMap.Map("container", {
                resizeEnable: true,
            
            });
        }




        const html = {
            name: <div>123</div>
        }

       
        const xc1tu = "./img/xc1.png"
        const xc2tu = "./img/xc2.png"
        const xc3tu = "./img/xc3.png"
        infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -30) });
        for (var i = 0, marker; i < str.length; i++) {
            if (str[i].GPSType == '行驶在线') {
                var marker = new AMap.Marker({
                    position: str[i].realTime,
                    icon: xc3tu,
                    map: map
                });
            }
            if (str[i].GPSType == '离线') {
                var marker = new AMap.Marker({
                    position: str[i].realTime,
                    icon: xc1tu,
                    map: map
                });
            }
            if (str[i].GPSType == '停车在线') {
                var marker = new AMap.Marker({
                    position: str[i].realTime,
                    icon: xc2tu,
                    map: map
                });
            }

            // var trarr = [1,2,3]

            var tr1 =  `<tr>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            <td>${str[i].name}</td>
            </tr>`

            // for(var g = 0;g < 5;g++) {
            //     tr1 += tr1
            // }

            // <div style="width:500px;height:200px;overflowY:auto">
            // <table style="border:1px solid #ccc;width:100%;text-align:center">
            // <tr>
            // <td>序号</td>
            // <td>下单时间</td>
            // <td>订单号</td>
            // <td>订单详情</td>
            // <td>联系人</td>
            // <td>联系方式</td>
            // <td>收货地址</td>
            // <td>订单状态</td>
            // </tr>
            // ${tr1}
            // </table>
            // </div>


            marker.content = `<Card>
            <p>燃气公司 : ${str[i].enterprise}</p>
            <p>燃气站点 : ${str[i].gasStationName}</p>
            <p>安全员 : ${str[i].name}</p>
            
            <p>GPS状态 : ${str[i].GPSType}</p>
            <p>速度 : ${str[i].speed}</p>


            </Card>`
            marker.on('click', this.markerClick.bind(this,str[i]));
            marker.emit('click', { target: marker });
        }
        // function markerClick(e) {
        //     infoWindow.setContent(e.target.content);
        //     infoWindow.open(map, e.target.getPosition());
        // }
        map.setFitView();
    }

    markerClick = (e,m) => {
        console.log(e,m)
        infoWindow.setContent(m.target.content);
        infoWindow.open(map, m.target.getPosition());
        // this.getSafetyOfficerDada(e.safetyOfficerId)
    }

    //获取地图模态框信息
    getSafetyOfficerDada = (id) => {
        request({
            url: '/zhrq-web/gas/deliverystaff/getSafetyOfficerDada',
            method: 'POST',
            data: { safetyOfficerId: id }
        }).then(data => {
            console.log(data)
            if(data.rc === 0) {
                setTimeout(() => {
                    this.initThree(data.ret.safetyOfficer,this.state.type)
    
                }, 500);
            }
           
        })
    }





    save = (v) => {
        request({
            url: '/zhrq-web/gas/deliverystaff/getCourierName',
            method: 'POST',
            data: { name: v ? v : "" }
        }).then(data => {
            console.log(data)
            this.setState({
                treeData: data.ret
            })
        })
    }

    onChange = (value) => {
        console.log('onChange ', value);
        this.setState({ value });
    }

    onSave = () => {
        request({
            url: '/zhrq-web/gas/deliverystaff/getPageListByMore',
            method: 'POST',
            data: { nameList: this.state.nameArr }
        }).then(data => {
            console.log(data)
            if (data.rc == 0) {
                this.setState({
                    dataSource: data.ret.resultList,
                    offLine: data.ret.offLine,
                    park: data.ret.park,
                    travel: data.ret.travel,
                    offLineNum: data.ret.offLineNum,
                    parkNum: data.ret.parkNum,
                    travelNum: data.ret.travelNum,
                    centre: data.ret.resultList[0].centre,
                    realTime: data.ret.resultList[0].realTime,
                    target: data.ret.resultList[0].target,
                })

                setTimeout(() => {
                    this.initThree(data.ret.resultList,this.state.type)

                }, 500);
            }
        })


    }

    onCheck = (checkedKeys, v) => {
        console.log('onCheck', checkedKeys, v.checkedNodes);

        let arr = []
        v.checkedNodes.forEach((item) => {
            if (item.props.value) {
                arr.push(item.props.value)
            }
        })

        setTimeout(() => {

            this.setState({
                nameArr: arr
            })
        }, 500)


    }

    onSelect = (selectedKeys, info) => {
        console.log('onSelect', info);
        this.setState({ selectedKeys });
    }

    renderTreeNodes = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeNode title={item.title} key={item.key} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode {...item} />;
    })


    onSearch = (v) => {
        console.log(v)
        this.save(v)
    }


    render() {
        const { loading, selectedRowKeys, dataSource, pageIndex, pageSize, treeData, autoExpandParent } = this.state
        const windowWidth = document.body.clientWidth;
        const columns = this.columns
        const height = document.body.clientHeight;
        let containerHeight = '60vh';
        if (windowWidth > 1367) {
            containerHeight = '74vh';
        }
        return (
            <div>


                <span onClick={this.showDrawer} style={{ cursor: "pointer", borderRadius: 5, width: 30, position: "fixed", zIndex: 999, right: 0, top: "30vh", backgroundColor: "#fff" }}>
                    展<br />
                    开
                </span>

                <Row>
                    <Col span={6}>
                        <Card className={style.left_box}
                            bodyStyle={{ padding: "6px 24px" }}
                        >
                            <Search
                                size="small"
                                placeholder="请输入"
                                onSearch={this.onSearch}
                                enterButton
                            />
                            <Tree
                                checkable
                                onCheck={this.onCheck}
                                // autoExpandParent={true}
                                defaultExpandedKeys={["0-0"]}
                            >
                                {this.renderTreeNodes(treeData)}
                            </Tree>
                            <Col style={{ textAlign: "center", position: "absolute", bottom: "10px", left: "50%", transform: "translateX(-50%)" }}><Button type="primary" style={{ width: 200 }} onClick={this.onSave}>查询</Button></Col>
                        </Card>
                    </Col>

                    <Col span={18}>
                        <div className={style.carstr}>
                            <div className={style.TTop_box}
                               
                            >
                                <Radio.Group defaultValue="地图" buttonStyle="solid" size="small" onChange={this.onGroup}>
                                    <Radio.Button value="地图" size="small">地图</Radio.Button>
                                    <Radio.Button value="卫星" size="small">卫星</Radio.Button>
                                    <Radio.Button value="三维" size="small">三维</Radio.Button>
            
                                </Radio.Group>

                            </div>
                            <Card className={style.Top_box}
                                bodyStyle={{ padding: "3px 24px" }}
                            >
                                行驶在线 : <img src={xc3} style={{ verticalAlign: "sub" }} /> <Divider type="vertical" /> 停车在线 : <img src={xc2} style={{ verticalAlign: "sub" }} /> <Divider type="vertical" /> 离线 : <img src={xc1} style={{ verticalAlign: "sub" }} />

                            </Card>
                        </div>
                        <Card className={style.right_Tbox}
                            id="container"
                            bodyStyle={{ padding: "6px 24px" }}
                        >
                            <Drawer
                                title="总览信息"
                                placement="right"
                                width={400}
                                // mask={false}
                                maskStyle={{ backgroundColor: "#f3f3f400" }}
                                closable={false}

                                onClose={this.onClose}
                                // getContainer={() => document.getElementById("container")}
                                visible={this.state.visible}
                            >
                                <img src={tup} style={{ width: "100%" }} />
                            </Drawer>
                        </Card>
                        <Card className={style.right_Bbox}
                            bodyStyle={{ padding: "6px 24px" }}
                        >

                            <Row>
                                <Col span={4}><img src={blueCar} style={{ display: "inline-block", width: "16px", verticalAlign: "sub" }} />行驶在线 : {this.state.travelNum}({this.state.travel}%)</Col>
                                <Col span={4}><img src={orangeCar} style={{ display: "inline-block", width: "16px", verticalAlign: "sub" }} />停车在线 : {this.state.parkNum}({this.state.park}%)</Col>
                                <Col span={4}><img src={gasCar} style={{ display: "inline-block", width: "16px", verticalAlign: "sub" }} />离线 : {this.state.offLineNum}({this.state.offLine}%)</Col>
                            </Row>
                            <MyTable
                                // bordered
                                loading={loading}
                                columns={this.state.columns}
                                // rowSelection={rowSelection}
                                pagination={false}
                                // scroll={{ y: windowWidth < 1400 ? height - 280 : height - 300 }}
                                dataSource={PublicService.transformArrayData(dataSource, true, true, pageIndex, pageSize)}
                            />

                        </Card>
                    </Col>
                </Row>
            </div>
        )
    }
}
export default (GasDate);
